<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>添加报修</title>
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    <!--标准mui.css-->
    <link rel="stylesheet" href="../../css/mui.min.css">
    <!--App自定义的css-->
    <link rel="stylesheet" type="text/css" href="../../css/app.css" />
    <link rel="stylesheet" href="../../css/iconfont.css" />
    <link rel="stylesheet" type="text/css" href="../../css/mui.picker.min.css" />
    <style>
        * { touch-action: none; }
        .mui-card .mui-control-content {
            padding: 10px;
        }
        /*自定义样式*/
        html,body{
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }
        a{
            color: #ffffff;
        }
        .mui-content{
            width: 100%;
            height: 100%;
            background: #ffffff;
        }
        .mui-bar{
            background:#4F77AA ;
            color: #ffffff;
            -webkit-box-shadow: 0 0 1px rgba(0,0,0,0);
            box-shadow: 0 0 1px rgba(0,0,0,0);
        }
        .mui-title{
            color: #ffffff;
        }
        .content_item{
            width: 100%;
            height: calc(100% - 52px);
        }
        .content_item .mui-control-content{
            width: 100%;
            height: calc(100% - 48px);
        }

        .mui-segmented-control{
            width: 50%;
            margin-left: 25%;
            border: 1px solid #4F77AA;
            border-radius: 15px;
        }
        .mui-segmented-control .mui-control-item{
            line-height: 30px;
        }
        .mui-segmented-control .mui-control-item1{
            border-radius: 15px 0 0 15px;
        }
        .mui-segmented-control .mui-control-item2{
            border-radius: 0px 15px 15px 0px;
        }
        .mui-segmented-control .mui-control-item.mui-active{
            background: #4F77AA;
        }
        .mui-segmented-control .mui-control-item{
            border-color:#4F77AA;
            border-left: 1px solid #4F77AA;
            color: #4F77AA;
        }
        .mui-media-object i{
            font-size: 36px;
            color: #999999;
            position: relative;
            top:20px;
        }
        .mui-table-view .mui-media-object.mui-pull-left{
            margin-right: 20px;
        }
        .mui-table-view .mui-media-object{
            width: 36px;
            height: 36px;
            line-height: 36px;
        }
        .mui-media-runbutton{
            text-align: center;
            border-radius: 50% 50%;
            margin-top: 20px;
        }
        .mui-media-runbutton span{
            color: #FFFFFF;
            font-size: 12px;
        }
        .color-primary{
            background: #1ab394;
        }
        .color-success {
            background: #1c84c6;
        }
        .color-info {
            background: #23c6c8;
        }
        .color-warning {
            background: #f8ac59;
        }
        .mui-media-body span.date{
            color:#f8ac59 ;
        }
        .mui-input-row label~input, .mui-input-row label~select, .mui-input-row label~textarea{
            width: 55%;
            float:left;
        }
        form span.icon{
            float: right;
            padding-right: 5%;
            padding-top: 10px;
        }
        .line_x{
            width:100%;
            height:8px;
            background: #EFEFF4;
        }
        form .textarea{
            border: 1px solid #dddddd;
            float: right;
            margin-top: 10px;
        /*  width: 55%;
               
            margin-right: 10%;*/        
        }
        .mui-input-group:after{
            background: rgba(0,0,0,0);
        }
        .bottom_submit {
            position: absolute;
            width: 100%;
            height: 48px;
            text-align: center;
            line-height: 48px;
            bottom: 0;
            background: #4F77AA;
            z-index: 2;
        }
        input[type=button]#submit {
            width: 100%;
            height: 48px;
            line-height: 48px;
            background: #4F77AA;
            border: none;
            padding: 0;
            color: #ffffff;
        }
    
        .clear{
            clear: both;
        }
        select.mui-h5{
            font-size: 18px;
        }
        .mui-input-group:before{
            background: #ffffff;
        }    
    </style>
</head>

<body>
<header class="mui-bar mui-bar-nav">
    <span class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></span>
    <h1 class="mui-title">添加报修</h1>
</header>
<div class="mui-content">
    <div style="padding: 10px 10px;">
        <div id="segmentedControl" class="mui-segmented-control">
            <a class="mui-control-item mui-control-item1 mui-active" href="#item1">有设备</a>
            <a class="mui-control-item mui-control-item2" href="#item2">无设备</a>
        </div>
    </div>
    <div class="content_item">
        <div id="item1" class="mui-control-content mui-active">
            <div id="scroll" class="mui-scroll-wrapper">
                <div class="mui-scroll">
                    <form id="mainForm1" class="mui-input-group">
                       <div class="mui-input-row">
                            <label>报修标题：</label>
                            <input type="text" id="repairName1" value="" />
                        </div>
						<!--<div class="mui-input-row">
                            <label>报修分类：</label>
                            <input type="hidden" id="repairCategoryId1" value="" />
                            <input type="text" id="repairCategory1" value="" />
                        </div>-->
                        <div class="mui-select-content">
                            <div  class="mui-select">
                                <select id="repairCategoryId1" class="mui-h5" style="margin:auto; color:#000;">
                                   <option value="">报修分类:</option>
                                    <option value="1">班组1</option>
                                    <option value="1">班组2</option>
                                    <option value="1">班组3</option>
                                </select>
                            </div>
                        </div>
                        
                        
                        <div class="mui-input-row append">
                            <label>选择设备：</label>
                            <input type="text" id="deviceCode1"  onclick="choiceEquipment()">
                        
                        </div>
                        <div class="mui-input-row">
                            <label>设备名称：</label>
                            <input type="hidden" id="haveNoDevice1" value="you">
                            <input type="text"  id="deviceName1" placeholder="" disabled/>
                        </div>
                        <div class="mui-input-row">
                            <label>设备位置：</label>
                            <input type="text" id="deviceSpace1" placeholder="" disabled/>
                        </div>
                        <!--<div class="mui-input-row">
                            <label>工单类型：</label>
                            <input type="hidden" id="workOrderTypeId1" placeholder=""/>
                            <input type="text" id="workOrderType1" placeholder=""/>
                        </div>-->
                         <div class="mui-select-content">
                            <div  class="mui-select">
                                <select id="workOrderTypeId1" class="mui-h5" style="margin:auto; color:#000;">
                                   <option value="">工单类型:</option>
                               <!--     <option value="1">班组1</option>
                                    <option value="1">班组2</option>
                                    <option value="1">班组3</option>-->
                                </select>
                            </div>
                        </div>
                        <div class="line_x" style=""></div>
                        <div class="" style="height:40px;padding: 10px 15px;">
                            <label>故障描述：</label>
                            <textarea class="textarea" id="repairContent1" rows="5" placeholder="故障描述"></textarea>
                        </div>
						<div class="clear"></div>
						<div class="" style="height:40px;padding: 10px 15px;">
                            <label>报修描述：</label>
                            <textarea class="textarea" id="repairDesc1" rows="5" placeholder="报修描述"></textarea>
                        </div>
                       

                    </form>


                </div>
            </div>

        </div>
        <div id="item2" class="mui-control-content">
            <div id="scroll1" class="mui-scroll-wrapper">
                <div class="mui-scroll">
                    <form id="mainform2" class="mui-input-group">
                       <div class="mui-input-row">
                            <label>报修标题：</label>
                            <input type="text" id="repairName2" value="" />
                        </div>
						<!--<div class="mui-input-row">
                            <label>报修分类：</label>
                            <input type="hidden" id="repairCategoryId2" value="" />
                            <input type="text" id="repairCategory2" value="" />
                        </div>
                        -->
                        <div class="mui-select-content">
                            <div  class="mui-select">
                                <select id="repairCategoryId2" class="mui-h5" style="margin:auto; color:#000;">
                                   <option value="">报修分类:</option>
                               <!--     <option value="1">班组1</option>
                                    <option value="1">班组2</option>
                                    <option value="1">班组3</option>-->
                                </select>
                            </div>
                        </div>
                         <div class="mui-input-row">
                            <label>设备名称：</label>
                            <input type="hidden" id="haveNoDevice2" value="wu">
                            <input type="text"  id="deviceName2" placeholder=""/>
                        </div>
                        <div class="mui-input-row">
                            <label>设备位置：</label>
                            <input type="text" id="deviceSpace2" placeholder=""/>
                        </div>
                        <!--<div class="mui-input-row">
                            <label>工单类型：</label>
                         
                            <input type="text" id="workOrderType2" placeholder=""/>
                        </div>-->
                        <div class="mui-select-content">
                            <div  class="mui-select">
                                <select id="workOrderTypeId2" class="mui-h5" style="margin:auto; color:#000;">
                                    <option value="">工单类型:</option>
                                 <!--   <option value="1">班组1</option>
                                    <option value="1">班组2</option>
                                    <option value="1">班组3</option>-->
                                </select>
                            </div>
                        </div>
                        
                        
                        <div class="line_x" style=""></div>
                        <div class="" style="height:40px;padding: 10px 15px;">
                            <label>故障描述：</label>
                            <textarea class="textarea" id="repairContent2" rows="5" placeholder="故障描述"></textarea>
                        </div>
						 <div class="clear"></div>
						<div class="" style="height:40px;padding: 10px 15px;">
                            <label>报修描述：</label>
                            <textarea class="textarea" id="repairDesc2" rows="5" placeholder="报修描述"></textarea>
                        </div>
                    </form>

                </div>
            </div>
        </div>

    </div>
    <div class="bottom_submit">
        <input type="button" value="提交" onclick="create();" id="submit">
    </div>

</div>
<script src="../../js/jquery-1.11.3.js"></script>
<script src="../../js/mui.min.js"></script>
<script src="../../js/mui.picker.min.js"></script>
<script src="../../../script/api.js"></script>
	<script>
		
		window.onload=function(){
		
			//加载设备信息
			addDevice();
			//加载设备类型
			workOrderType();
			//加载报修分类
			getCategory();
		}
		
		
		var deviceCode="";
		var deviceName="";
		var deviceSpace="";
		var url=window.location.search; //获取url中"?"符后的字串  
		//alert(url);
		if(url.indexOf("?")!=-1){
		//	mainId = url.substr(url.indexOf("=")+1);
			var arr=url.split("&");
			deviceCode=decodeURI( arr[0].substr(arr[0].indexOf("=")+1));
			deviceName=decodeURI(arr[1].substr(arr[1].indexOf("=")+1));
			deviceSpace=decodeURI(arr[2].substr(arr[2].indexOf("=")+1));
		}	

		//加载设备编码..
		function addDevice(){
			$("#deviceCode1").val(deviceCode);
			$("#deviceName1").val(deviceName);
			$("#deviceSpace1").val(deviceSpace);
		
		}
	
		//加载工单类型
		function workOrderType(){
			
			$.ajax({
				url:ctx+'/sys/patrol/App/AppRepair/getWorkOrderType',
				type:"get",
				dataType:"json",
				success:function(datas){
	    			
	    			for(var i=0;i<datas.length;i++){
	    				var html1='<option value="'+datas[i].id+'">'+datas[i].workOrderTypeName+'</option>';
	    				$("#workOrderTypeId1").append(html1);
	    				var html2='<option value="'+datas[i].id+'">'+datas[i].workOrderTypeName+'</option>';
	    				$("#workOrderTypeId2").append(html2);
	    	
	    			}
	    	
	    		}
    	
    		});
			
		}
		
		//加载维修分类
		function getCategory(){
			
			$.ajax({
				url:ctx+'/sys/patrol/App/AppRepair/getCategory',
				type:"get",
				dataType:"json",
				success:function(datas){
	    			
	    			for(var i=0;i<datas.length;i++){
	    				var html1='<option value="'+datas[i].id+'">'+datas[i].repairCategory+'</option>';
	    				$("#repairCategoryId1").append(html1);
	    				var html2='<option value="'+datas[i].id+'">'+datas[i].repairCategory+'</option>';
	    				$("#repairCategoryId2").append(html2);
	    			}
	    	
	    		}
    	
    		});
			
		}


		//增加报修
		function create(){
			
			var deviceCode=$("#deviceCode1").val();
			
			if(deviceCode==null||deviceCode==""){
		//	alert("111"+deviceCode);
				var params={};
				params.repairName=$("#repairName2").val();
				params.repairCategoryId=$('#repairCategoryId2 option:selected').val();//选中的值
				params.haveNoDevice=$("#haveNoDevice2").val();
				params.deviceName=$("#deviceName2").val();
				params.deviceSpace=$("#deviceSpace2").val();
				params.workOrderTypeId=$('#workOrderTypeId2 option:selected').val();//选中的值
				params.repairContent=$("#repairContent2").val();
				params.repairDesc=$("#repairDesc2").val();
				
				var typeId=$('#workOrderTypeId2 option:selected').val();
		//	alert("11111111--"+typeId);
				if(typeId!=null&&typeId!=""){
			
					//无设备的报修
					$.ajax({
						url:ctx+'/sys/patrol/App/AppRepair/appsave',
						type:"post",
						data: params,
						dataType:"json",
						success:function(datas){
			    			if(datas.msg==1){
			    				mui.toast('报修成功!');
			    				window.location.href="repair_slip.html";
			    			
			    			}else{
			    				 mui.alert('报修失败!', '', function() { });
			    			}
			    		}
//			    		,error:function(){
//			    			mui.alert('连接不到服务器,请检查网络!!!', '', function() { });
//			    		}
	    			});

				}else{
					mui.alert('请将信息补充完整!!!', '', function() { });
				}
			}else{
			//	alert("222"+deviceCode);
				var params={};
				params.repairName=$("#repairName1").val();
				params.repairCategoryId=$('#repairCategoryId1 option:selected').val();//选中的值
				params.haveNoDevice=$("#haveNoDevice1").val();
				params.deviceCode=$("#deviceCode1").val();
				params.deviceName=$("#deviceName1").val();
				params.deviceSpace=$("#deviceSpace1").val();
				params.workOrderTypeId=$('#workOrderTypeId1 option:selected').val();//选中的值
				params.repairContent=$("#repairContent1").val();
				params.repairDesc=$("#repairDesc1").val();
			
				var typeId=$('#workOrderTypeId1 option:selected').val();
			//	alert("222222--"+typeId);
				if(typeId!=null&&typeId!=""){
			
					//无设备的报修
					$.ajax({
						url:ctx+'/sys/patrol/App/AppRepair/appsave',
						type:"post",
						data: params,
						dataType:"json",
						success:function(datas){
			    			if(datas.msg==1){
			    				mui.toast('报修成功!');
			    				window.location.href="../all/repair_slip.html";
			    			
			    			}else{
			    				 mui.alert('报修失败!', '', function() { });
			    			}
			    		}
	    	
	    			});
				}else{
					mui.alert('请将信息补充完整!!!', '', function() { });
				}
			}
		
		}





    mui('body').on('tap','a',function(){
        window.top.location.href=this.href;
    });
    mui.init({
        swipeBack: true //启用右滑关闭功能
    });
    (function($) {
        $('#scroll').scroll({
            indicators: true //是否显示滚动条
        });
        $('#scroll1').scroll({
            indicators: true //是否显示滚动条
        });
        var start_time = $('#start_time')[0];
        var btns = $('.btn');
        btns.each(function(i, btn) {
            btn.addEventListener('tap', function() {
                var _self = this;
                if(_self.picker) {
                    _self.picker.show(function (rs) {
                        end_time.value=rs.text;
                        _self.picker.dispose();
                        _self.picker = null;
                    });
                } else {
                    var optionsJson = this.getAttribute('data-options') || '{}';
                    var options = JSON.parse(optionsJson);
                    var id = this.getAttribute('id');
                    /*
                     * 首次显示时实例化组件
                     * 示例为了简洁，将 options 放在了按钮的 dom 上
                     * 也可以直接通过代码声明 optinos 用于实例化 DtPicker
                     */
                    _self.picker = new $.DtPicker(options);
                    _self.picker.show(function(rs) {
                        /*
                         * rs.value 拼合后的 value
                         * rs.text 拼合后的 text
                         * rs.y 年，可以通过 rs.y.vaue 和 rs.y.text 获取值和文本
                         * rs.m 月，用法同年
                         * rs.d 日，用法同年
                         * rs.h 时，用法同年
                         * rs.i 分（minutes 的第二个字母），用法同年
                         */
                        start_time.value=rs.text;
                        // end_time.value=rs.text;
                        /*
                         * 返回 false 可以阻止选择框的关闭
                         * return false;
                         */
                        /*
                         * 释放组件资源，释放后将将不能再操作组件
                         * 通常情况下，不需要示放组件，new DtPicker(options) 后，可以一直使用。
                         * 当前示例，因为内容较多，如不进行资原释放，在某些设备上会较慢。
                         * 所以每次用完便立即调用 dispose 进行释放，下次用时再创建新实例。
                         */
                        _self.picker.dispose();
                        _self.picker = null;
                    });
                }

            }, false);
        });
        var segmentedControl = document.getElementById('segmentedControl');
        $('.mui-input-group').on('change', 'input', function() {
            if (this.checked) {
                var styleEl = document.querySelector('input[name="style"]:checked');
                var colorEl = document.querySelector('input[name="color"]:checked');
                if (styleEl && colorEl) {
                    var style = styleEl.value;
                    var color = colorEl.value;
                    segmentedControl.className = 'mui-segmented-control' + (style ? (' mui-segmented-control-' + style) : '') + ' mui-segmented-control-' + color;
                }
            }
        });
    })(mui);

    $(document).on("click","span.mui-pull-left",function(){
        window.location.href="../../../index.html";
    })
//    提交报修
//  $(document).on("click","#submit",function(){
//      window.location.href="repair_slip.html";
//  })

   
//    选择设备
    function choiceEquipment(){
    
//  	var url="equipment_list.html";
//  	window.open(url);
        window.location.href="equipment_list.html";
    }
</script>

</body>

</html>